<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="main_box">
    <div class="main">
      <!-- 头部区域 -->
      <div class="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>年度协议管理</el-breadcrumb-item>
          <el-breadcrumb-item>二级商协议</el-breadcrumb-item>
          <el-breadcrumb-item>新增二级商协议</el-breadcrumb-item>
        </el-breadcrumb>
        <div>新增二级商协议</div>
      </div>
      <Division title="协议主体" number="1"></Division>
      <el-card>
        <div class="box-card">
          <div>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="90px"
              size="mini"
              class="demo-ruleForm"
            >
              <el-form-item label="协议客户:" prop="client">
                <el-select v-model="ruleForm.client" placeholder="选择客户">
                  <el-option
                    v-for="item in enums.clientList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <div>{{ partnerComputed }}</div>
              </el-form-item>
              <el-form-item label="购进指标:" prop="buying">
                <el-select v-model="ruleForm.buying" placeholder="请选择">
                  <el-option
                    v-for="item in enums.buyingList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-input
                  v-model="ruleForm.amount"
                  placeholder="输入金额/数量"
                ></el-input>
              </el-form-item>
              <el-form-item label="销售区域:" prop="area">
                <el-select
                  v-model="ruleForm.area"
                  placeholder="选择区域"
                  @change="changeArea"
                >
                  <el-option
                    v-for="item in enums.areaList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
                <el-tag
                  style="margin-right: 8px"
                  v-for="item in areaTagList"
                  @close="closeTag(item)"
                  :key="item"
                  closable
                  size="medium"
                  >{{ item }}</el-tag
                >
              </el-form-item>
              <el-form-item label="购进渠道:" prop="channel">
                <el-select v-model="ruleForm.channel" placeholder="编码/名称">
                  <el-option
                    v-for="item in enums.channelList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-select
                  class="trench_select"
                  v-model="ruleForm.trench"
                  placeholder="指定渠道"
                >
                  <el-option
                    v-for="item in channelComputed"
                    :key="item.id"
                    :label="item.value"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="90px"
              size="mini"
              class="demo-ruleForm"
            >
              <el-form-item label="协议状态:" prop="agreement">
                <el-select v-model="ruleForm.agreement" placeholder="请选择">
                  <el-option
                    v-for="item in enums.agreementList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="纯销指标:" prop="sell">
                <el-select v-model="ruleForm.sell" placeholder="请选择">
                  <el-option
                    v-for="item in enums.sellList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-input
                  v-model="ruleForm.sellValue"
                  placeholder="输入金额/数量"
                ></el-input>
              </el-form-item>
              <el-form-item label="签订时间:" prop="time">
                <el-date-picker
                  v-model="ruleForm.time"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="code" label="指定渠道编码"> </el-table-column>
          <el-table-column prop="name" label="指定渠道名称"> </el-table-column>
          <el-table-column prop="address" label="所在省"> </el-table-column>
        </el-table>
      </el-card>
      <Division title="产品政策" number="2"></Division>
      <div class="interim">
        <el-button size="small" type="primary" @click="handleClick">
          添加产品
        </el-button>
        <div v-for="item in interimList" :key="item.id">
          <span>{{ item.name }}</span>
          <span>{{ item.value }}</span>
        </div>
      </div>
      <el-card>
        <div slot="header" class="clearfix">
          <div class="form-box">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="90px"
              size="mini"
              class="demo-ruleForm"
            >
              <el-form-item label="产品:" prop="product">
                <el-select v-model="ruleForm.product" placeholder="选择产品">
                  <el-option
                    v-for="item in enums.productList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <div style="min-width: 95px; font-size: 12px; color: #4f8cff">
                  美复胶丸 24粒/盒
                </div>
              </el-form-item>
              <el-form-item label="协议效期:" prop="time">
                <el-date-picker
                  v-model="signTime"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <el-button size="small" type="warning" plain @click="handleClick">
            删除
          </el-button>
        </div>
        <div class="form_card" style="margin-bottom: 12px">
          <div class="form_card_top"></div>
          <div
            v-for="item in formCardList"
            :key="item.id"
            class="form_card_item"
          >
            <div class="top">{{ item.name }}</div>
            <div class="bottom">
              <el-input
                v-model="formCardListValue[item.value]"
                size="mini"
                placeholder="请输入"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="form_card">
          <div class="form_card_top"></div>
          <div class="form_card_item">
            <div class="top">分销奖励</div>
            <div class="bottom">
              <el-input
                v-model="formCardListValue2.award"
                size="mini"
                placeholder="请输入"
              ></el-input>
            </div>
          </div>
          <div class="form_card_item">
            <div class="top">费用科目</div>
            <div class="bottom">
              <el-select
                v-model="formCardListValue2.awardSubject"
                size="mini"
                placeholder="请选择活动区域"
              >
                <el-option
                  v-for="item in enums.awardSubjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form_card_item">
            <div class="top">零售配送</div>
            <div class="bottom">
              <el-input
                v-model="formCardListValue2.delivery"
                size="mini"
                placeholder="请输入"
              ></el-input>
            </div>
          </div>
          <div class="form_card_item">
            <div class="top">费用科目</div>
            <div class="bottom">
              <el-select
                v-model="formCardListValue2.deliverySubject"
                size="mini"
                placeholder="请选择活动区域"
              >
                <el-option
                  v-for="item in enums.awardSubjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form_card_item">
            <div class="top">医疗配送商</div>
            <div class="bottom">
              <el-input
                v-model="formCardListValue2.distributor"
                size="mini"
                placeholder="请输入"
              ></el-input>
            </div>
          </div>
          <div class="form_card_item">
            <div class="top">费用科目</div>
            <div class="bottom">
              <el-select
                v-model="formCardListValue2.distributorSubject"
                size="mini"
                placeholder="请选择活动区域"
              >
                <el-option
                  v-for="item in enums.awardSubjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form_card_item">
            <div class="top">自定义7</div>
            <div class="bottom">
              <el-date-picker
                v-model="formCardListValue2.userDefined7"
                size="mini"
                type="date"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="form_card_item">
            <div class="top">自定义8</div>
            <div class="bottom">
              <el-date-picker
                v-model="formCardListValue2.userDefined8"
                size="mini"
                type="date"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </el-card>
      <Division title="补充协议" number="3"></Division>
      <div class="supplemental_agreement">
        <div class="tabs_right_btn">
          <el-button size="small" type="primary" @click="handleClick">
            新增
          </el-button>
        </div>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="补充协议1" name="first">
            <div class="top">
              <div class="title">协议内容:</div>
              <div class="btn">
                <el-button
                  size="small"
                  type="warning"
                  plain
                  @click="handleClick"
                >
                  删除
                </el-button>
              </div>
            </div>
            <el-input
              type="textarea"
              :autosize="{ minRows: 6 }"
              placeholder="请输入内容"
              v-model="textareaValue"
            >
            </el-input>
          </el-tab-pane>
          <el-tab-pane label="补充协议2" name="second">
            <div class="top">
              <div class="title">协议内容:</div>
              <div class="btn">
                <el-button
                  size="small"
                  type="warning"
                  plain
                  @click="handleClick"
                >
                  删除
                </el-button>
              </div>
            </div>
            <el-input
              type="textarea"
              :autosize="{ minRows: 6 }"
              placeholder="请输入内容"
              v-model="textareaValue"
            >
            </el-input>
          </el-tab-pane>
          <el-tab-pane label="补充协议3" name="third">
            <div class="top">
              <div class="title">协议内容:</div>
              <div class="btn">
                <el-button
                  size="small"
                  type="warning"
                  plain
                  @click="handleClick"
                >
                  删除
                </el-button>
              </div>
            </div>
            <el-input
              type="textarea"
              :autosize="{ minRows: 6 }"
              placeholder="请输入内容"
              v-model="textareaValue"
            >
            </el-input>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="footer">
        <el-button type="primary" @click="handleClick">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Division from "../components/Division.vue";
import dayjs from "dayjs";
export default {
  data() {
    return {
      ruleForm: {
        client: "SHZYYYYXGS", // 协议客户
        buying: "sum", // 购进指标
        amount: "", // 购进指标的值
        area: "", // 销售区域
        channel: "", // 购进渠道
        trench: "", // 购进渠道的值
        agreement: "0", // 协议状态
        sell: "sum", // 纯销指标
        sellValue: "", // 纯销指标的值
        time: "", // 签订时间
      },
      rules: {
        client: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
      enums: {
        clientList: [
          {
            id: 0,
            name: "李世民",
            value: "SHZYYYYXGS",
          },
          {
            id: 1,
            name: "李隆基",
            value: "JYLMMJTYXGS",
          },
        ],
        buyingList: [
          {
            id: 0,
            name: "金额",
            value: "sum",
          },
          {
            id: 1,
            name: "数量",
            value: "quantity",
          },
        ],
        areaList: [
          {
            id: 0,
            name: "全国",
          },
          {
            id: 1,
            name: "上海市",
          },
          {
            id: 2,
            name: "浙江省",
          },
        ],
        channelList: [
          {
            id: 0,
            name: "编码",
            value: "encod",
          },
          {
            id: 1,
            name: "名称",
            value: "name",
          },
        ],
        trenchListCode: [
          {
            id: 0,
            value: "BJ000090",
          },
          {
            id: 1,
            value: "BJ000192",
          },
          {
            id: 2,
            value: "BJ000283",
          },
        ],
        trenchListName: [
          {
            id: 0,
            value: "宁波九州通药业有限公司",
          },
          {
            id: 1,
            value: "国药控股精华有限公司",
          },
          {
            id: 2,
            value: "老百姓药业有限公司",
          },
        ],
        agreementList: [
          {
            id: 0,
            name: "正常",
            value: "0",
          },
          {
            id: 1,
            name: "异常",
            value: "1",
          },
        ],
        sellList: [
          {
            id: 0,
            name: "金额",
            value: "sum",
          },
          {
            id: 1,
            name: "数量",
            value: "quantity",
          },
        ],
        productList: [
          {
            id: 0,
            name: "胖大海",
            value: "PDH",
          },
          {
            id: 1,
            name: "玻尿酸",
            value: "BNS",
          },
        ],
        awardSubjectList: [
          {
            id: 0,
            name: "奖金",
          },
          {
            id: 1,
            name: "报销",
          },
          {
            id: 2,
            name: "配送",
          },
          {
            id: 3,
            name: "外包",
          },
        ],
      },
      areaTagList: ["全国"],
      tableData: [
        {
          code: "BJ000090",
          name: "宁波九州通药业有限公司",
          address: "浙江省",
        },
        {
          code: "BJ000192",
          name: "国药控股精华有限公司",
          address: "浙江省",
        },
        {
          code: "BJ000283",
          name: "老百姓药业有限公司",
          address: "浙江省",
        },
      ],
      interimList: [
        {
          id: 0,
          name: "购进总指标 (万元) : ",
          value: "￥152.65",
        },
        {
          id: 1,
          name: "指标按季度分解 (万元) : ",
          value: "【Q1】￥152.65，【Q2】￥12.5，【Q3】￥12.5，【Q1】￥12.5",
        },
        {
          id: 2,
          name: "购进总指标 (万元) : ",
          value: "￥152.65",
        },
      ],
      product: "",
      signTime: "",
      formCardList: [
        {
          id: 0,
          name: "协议价（元）",
          value: "corporateRate",
        },
        {
          id: 1,
          name: "票折（元）",
          value: "discount",
        },
        {
          id: 2,
          name: "购进指标量（大单位）",
          value: "buyingInBig",
        },
        {
          id: 3,
          name: "购进指标量（小单位）",
          value: "buyingInSmall",
        },
        {
          id: 4,
          name: "购进金额（万元）",
          value: "buyingRate",
        },
        {
          id: 5,
          name: "纯销指标量（小单位）",
          value: "salesVolume",
        },
        {
          id: 6,
          name: "纯销指标金额（万元）",
          value: "salesAmount",
        },
      ],
      formCardListValue: {
        corporateRate: "",
        discount: "",
        buyingInBig: "",
        buyingInSmall: "",
        buyingRate: "",
        salesVolume: "",
        salesAmount: "",
      },
      formCardListValue2: {
        award: "",
        awardSubject: "",
        delivery: "",
        deliverySubject: "",
        distributor: "",
        distributorSubject: "",
        userDefined7: "",
        userDefined8: "",
      },
      activeName: "first",
      textareaValue: "",
    };
  },
  components: {
    Division,
  },
  computed: {
    // 协议客户计算逻辑
    partnerComputed() {
      let name = "";
      switch (this.ruleForm.client) {
        case "SHZYYYYXGS":
          name = "上海正也医药有限公司";
          break;

        case "JYLMMJTYXGS":
          name = "景域驴妈妈集团";
          break;

        default:
          break;
      }
      return name;
    },
    // 购进渠道计算逻辑
    channelComputed() {
      let list = [];
      switch (this.ruleForm.channel) {
        case "encod":
          list = this.enums.trenchListCode;
          break;

        case "name":
          list = this.enums.trenchListName;
          break;

        default:
          break;
      }
      return list;
    },
  },
  created() {
    // 签订时间默认为当前时间
    this.ruleForm.time =
      this.formCardListValue2.userDefined7 =
      this.formCardListValue2.userDefined8 =
        dayjs(dayjs()).format("YYYY-MM-DD HH:mm:ss");
    // 协议有效期默认时间
    this.signTime = [
      dayjs().endOf("day").format("YYYY-MM-DD"),
      dayjs().add(3, "month").startOf("day").format("YYYY-MM-DD"),
    ];
  },
  methods: {
    // 销售区域方法逻辑
    changeArea(value) {
      for (let i = 0; i <= this.areaTagList.length; i++) {
        if (this.areaTagList[i] === value) {
          return;
        }
        this.areaTagList = Array.from(new Set([...this.areaTagList, value]));
      }
      this.ruleForm.area = "";
    },
    // 关闭tag
    closeTag(e) {
      this.areaTagList = this.areaTagList.filter((item) => {
        return item !== e;
      });
    },
    // 按钮点击
    handleClick() {
      this.$message.error("接口未开发, 暂不支持此功能");
    },
  },
};
</script>

<style lang="scss" scoped>
.main_box {
  display: flex;
  flex-direction: column;
  height: 600px;
}
.main {
  display: flex;
  flex-direction: column;
}
.header {
  position: sticky;
  top: -20px;
  box-sizing: border-box;
  height: 85px;
  background-color: #fff;
  margin: -20px -20px 0 -20px;
  padding: 20px 20px 20px 20px;
  font-size: 18px;
  z-index: 999;
  .el-breadcrumb {
    font-size: 12px;
    color: #969696 !important;
  }
}

.box-card {
  display: flex;
  justify-content: space-between;
}

::v-deep .el-form-item__content {
  display: flex;
  .el-select {
    width: 100px;
    margin-right: 12px;
    .el-input .el-input--suffix {
      .el-input__inner {
      }
    }
  }
}
.el-input {
  width: 120px;
}

.el-table {
  margin-bottom: 0;
}

.interim {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 26px;
  font-size: 12px;
  color: #696969;
}

::v-deep .el-card__header {
  height: 58px;
  align-items: center;
  padding: 0 20px;

  .clearfix {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.form-box {
  .el-form {
    display: flex;
    height: 100%;

    .el-form-item {
      margin-bottom: 0;

      ::v-deep .el-form-item__label {
        font-size: 12px;
      }
    }
  }
}

.form_card {
  position: relative;
  border: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-around;

  .form_card_top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #f8f8f8;
  }

  .form_card_item {
    z-index: 9;
    .top {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      color: #656565;
    }
    .bottom {
      padding: 10px 0;
      ::v-deep .el-input__inner {
        width: 120px;
      }

      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 138px;
        ::v-deep .el-input__inner {
          width: 100%;
          background-color: #fff;
        }
      }

      .el-input {
        ::v-deep .el-input__inner {
          background-color: #f8f8f8;
        }
      }
    }
  }
}

.supplemental_agreement {
  position: relative;
  padding-bottom: 50px;
  margin-bottom: 38px;
  background-color: #fff;
  .tabs_right_btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
  }

  .el-tabs {
    .el-tab-pane {
      .top {
        height: 52px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    ::v-deep .el-tabs__header {
      background-color: #f5f5f5;
      margin-bottom: 0rem;

      .el-tabs__nav {
        background-color: #fff;
      }
    }

    ::v-deep .el-tabs__content {
      padding: 0 22px;
    }
  }
}

.footer {
  position: sticky;
  bottom: 0;
  height: 86px;
  margin: 0 -20px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  background-color: #fff;
  z-index: 999;
}

.trench_select {
  width: 180px !important;
}
</style>
